<meta charset="utf-8"/>
<div class="row">
  <div class="col-xs-12">
    <div class="row">
      <div class="col-xs-12">
        <div class="clearfix">
          <table class="no-border" style="display:inline">
            <tr permission='area_btn_listData' style="display:none">
              <td style="padding: 0px 6px;">
                区域名称
              </td>
              <td>
                <div class="input-group">
                  <input type="text" id="key_name" class="form-control search-query" placeholder="区域名称" style="width:140px"/>
                </div>
              </td>
              <td class="hidden-480" style="padding: 0px 6px;">
                父级区域
              </td>
              <td>
                <div class="input-group">
                  <input type="text" id="key_pname" class="form-control search-query hidden-480" placeholder="父级区域名称" style="width:140px"/>
                  <span class="input-group-btn">
                    <button type="button" class="btn btn-inverse btn-white" id="btnSearch" permission='area_btn_listData' style="display:none">
                      <span class="ace-icon fa fa-search bigger-110"></span>
                      搜索
                    </button>
                  </span>
                </div>
              </td>
              <td>
                <div class="input-group">
                  <span class="input-group-btn">
                    <button type="button" class="btn btn-inverse btn-white" id="btnAdd" permission='area_btn_add' style="display:none">
                      <span class="ace-icon glyphicon glyphicon-plus bigger-110"></span>
                      添加
                    </button>
                  </span>
                </div>
              </td>
              <td>
                <div class="input-group">
                  <span class="input-group-btn">
                    <button type="button" class="btn btn-inverse btn-white" id="btnDel" permission='area_btn_delByKeys' style="display:none">
                      <span class="fa fa-trash red2 bigger-110"></span>
                      删除
                    </button>
                  </span>
                </div>
              </td>
            </tr>
          </table>
          <div class="hidden-480 pull-right tableTools-container" permission='area_btn_listData' style="display:none"></div>
        </div>
        <table id="tableListArea" class="table table-striped table-bordered table-hover"></table>
      </div>
    </div>
  </div>
</div>
<div id="div_sys_area_edit" style="display:none;padding:10px 0px;">
  <form class="form-horizontal" id="form_sys_area_edit" role="form">
    <label class="col-sm-3 control-label no-padding-right" for="name"><div class="hr-4"></div>区域名称</label>
    <div class="col-sm-7">
      <div class="hr-4"></div>
      <input type="text" id="name" placeholder="区域名称" class="form-control"/>
    </div>
    <label class="col-sm-3 control-label no-padding-right" for="level"><div class="hr-4"></div>区域级别</label>
    <div class="col-sm-7">
      <div class="hr-4"></div>
      <div class="input-group">
        <span class="input-group-btn">
          <button data-toggle="dropdown" class="btn btn-primary btn-white dropdown-toggle col-sm-12" style="margin-left:0.01em">
            <span id="dropdownLabellevel">选择级别</span>
            <i class="ace-icon fa fa-angle-down"></i>
          </button>
          <ul class="dropdown-menu col-sm-12" style="margin-left:-1px;width:215px;min-width:215px;max-width:215px">
            <li>
              <a id="level_" href="javascript:winFn.dropdown('#level','','#dropdownLabellevel','选择级别');">选择级别</a>
            </li>
            <li>
              <a id="level1" href="javascript:winFn.dropdown('#level',1,'#dropdownLabellevel','省');">省</a>
            </li>
            <li>
              <a id="level2" href="javascript:winFn.dropdown('#level',2,'#dropdownLabellevel','市');">市</a>
            </li>
            <li>
              <a id="level3" href="javascript:winFn.dropdown('#level',3,'#dropdownLabellevel','县');">县</a>
            </li>
            <li>
              <a id="level4" href="javascript:winFn.dropdown('#level',4,'#dropdownLabellevel','镇');">镇</a>
            </li>
            <li>
              <a id="level5" href="javascript:winFn.dropdown('#level',5,'#dropdownLabellevel','村');">村</a>
            </li>
          </ul>
          <input id="level" type="hidden"/>
        </span>
      </div>
    </div>
  </form>
</div>
<div id="div_sys_area_proxy" style="display:none;padding-top:2px;">
  <form class="form-horizontal" id="form_area_proxy" role="form">
    <label class="col-sm-3 control-label no-padding-right"><div class="hr-4"></div>选择级别</label>
    <div class="col-sm-8">
      <div class="hr-4"></div>
      <div class="input-group">
        <span class="input-group-btn">
          <button data-toggle="dropdown" class="btn btn-primary btn-white dropdown-toggle col-sm-12" style="margin-left:0px;">
            <span id="dropdownLabelProxy">选择选项</span>
            <i class="ace-icon fa fa-angle-down"></i>
          </button>
          <ul class="dropdown-menu col-sm-12">
            <li>
              <a id="level_value_" href="javascript:winFn.dropdown('#level_value','','#dropdownLabelProxy','选择选项');">选择选项</a>
            </li>
            <!--<li>
              <a id="level_value1" href="javascript:winFn.dropdown('#level_value',1,'#dropdownLabelProxy','省分公司');">省分公司</a>
            </li>-->
            <li>
              <a id="level_value2" href="javascript:winFn.dropdown('#level_value',2,'#dropdownLabelProxy','市分公司');">市分公司</a>
            </li>
            <li>
              <a id="level_value3" href="javascript:winFn.dropdown('#level_value',3,'#dropdownLabelProxy','区县代理');">区县代理</a>
          </ul>
          <input id="level_value" type="hidden"/>
        </span>
      </div>
    </div>
  </form>
</div>
<div id="divKeyColumns" style="display:none;padding:1px 0px;"></div>
<input type="hidden" id="sys_area_edit_keyId"/>
<div style="display:none;">
  <input type="hidden" id="area_btn_listData"/>
  <input type="hidden" id="area_btn_add"/>
  <input type="hidden" id="area_btn_delByKeys"/>
  <input type="hidden" id="area_row_edit"/>
  <input type="hidden" id="area_btn_proxy"/>
  <input type="hidden" id="area_row_queryById"/>
  <input type="hidden" id="area_row_delById"/>
</div>
<script type="text/javascript">
  var scripts = [null,null];
  $('.page-content-area').ace_ajax('loadScripts',scripts,function(){
    var tableDom = '#tableListArea';
    var inputEditKeyId = '#sys_area_edit_keyId';
    $(function(){
      var urlRoute = '/area/';/*请求controller层的url*/
      var getList = urlRoute + 'listData';/*获取数据列表*/
      var urlAdd = urlRoute + 'add';/*添加*/
      var addProxy = urlRoute + 'addProxy';/*添加代理区域*/
      var urlEdit = urlRoute + 'edit';/*编辑*/
      var urlQueryById = urlRoute + 'queryById';/*根据id查询对应的数据*/
      var urlDelById = urlRoute + 'delById';/*根据id删除对应的数据*/
      var urlDelByKeys = urlRoute + 'delByKeys';/*批量删除*/
      var thisTable = pageDataTable.initDataTable({
        tableDom : tableDom,
        sAjaxSource: getList,
        fnServerParams : function(params){
          params.push({"name":"name","value":$("#key_name").val()},{"name":"pName","value":$("#key_pname").val()});
        },
        aoColumns : [
          {
            bSortable: false,
            mData : "kid",
            sWidth : "38px",
            sClass : "center",
            sTitle : '<label title="全选|不选"><input type="checkbox" class="ace" /><span class="lbl"></span></label>'
          },
          {
            mData : "name",
            sTitle : "区域名称",
            sWidth : "30%"
          },
          {
            mData : "type",
            sTitle : "城乡分类代码",
            render : function(value,type,row,meta){
              if(value == 100){
                return "城镇";
              }else if(value == 110){
                return "城区";
              }else if(value == 111){
                return "主城区";
              }else if(value == 112){
                return "城乡结合区";
              }else if(value == 120){
                return "镇区";
              }else if(value == 121){
                return "镇中心区";
              }else if(value == 122){
                return "镇乡结合区";
              }else if(value == 123){
                return "特殊区域";
              }else if(value == 200){
                return "乡村";
              }else if(value == 210){
                return "乡中心区";
              }else if(value == 220){
                return "村庄";
              }else{
                return "";
              }
            }
          },
          {
            mData : "pName",
            sTitle : "父级区域",
            sWidth : "30%"
          },
          {
            mData : "level",
            sTitle : "区域级别",
            sWidth : "10%",
            render : function(value,type,row,meta){
              if(value == 1){
                return "省";
              }else if(value == 2){
                return "市";
              }else if(value == 3){
                return "县";
              }else if(value == 4){
                return "镇";
              }else if(value == 5){
                return "村";
              }else{
                return "";
              }
            }
          },
          {
            mData : "_kid_",
            sTitle : "<label style='color:#000;margin-left:6px;' title='单行操作'>操作选项</label>",
            bSortable : false,
            sWidth : "165px"
          }
        ],
        columnDefs : [
          {
            targets : 0,//指定的列
            render : function(value,type,row,meta){
              return '<label title="选择|取消"><input type="checkbox" name="kid" value="'+value+'" style="cursor:pointer;text-decoration:none;outline:none;"/><span class="lbl"></span></label>';
            }
          },
          {
            targets : -1,
            render : function(value,type,row,meta){
              var html = "<a href='javascript:thisPage.rowEdit("+meta.row+");' style='outline:none;text-decoration: none;color:#3b8cff;margin-left:6px;display:none' permission='area_row_edit'>编辑</a>"+
                "<a class='hidden-xs' href='javascript:thisPage.rowDel("+meta.row+");' style='outline:none;text-decoration: none;color:#f00;margin-left:6px;display:none' permission='area_row_delById'>删除</a>"+
                "<a class='hidden-xs' href='javascript:thisPage.rowNode("+meta.row+");' style='outline:none;text-decoration: none;color:#1186ec;margin-left:6px;display:none' permission='area_btn_add'>添加下级</a>"+
                "<a class='hidden-xs' href='javascript:thisPage.rowProxy("+meta.row+");' style='outline:none;text-decoration: none;color:#f1690e;margin-left:6px;display:none' permission='area_btn_proxy'>代理</a>";
              return html;
            }
          },
          {
            targets: [1,2,3,4],
            render: function (value,type,row,meta){
              return pageDataTable.formatColumn(value);
            }
          },
          {
            "visible":false,//列的隐藏显示
            "targets": []//指定列
          }
        ]
      });
      pageDataTable.buttons(thisTable);
      pageDataTable.action(thisTable);
      pageDataTable.select(thisTable,tableDom);
      pageDataTable.tooltip();
      var thisJquery = $(tableDom).dataTable();
      thisPage = {
        init : function(){
          this.addEvent();
        },
        initDom : function(){
        },
        createDropdown : function(){
        },
        addEvent : function(){
          this.btnEvent();
        },
        btnEvent : function(){
          $(tableDom +' tbody').on('dblclick','tr',function(){
            if(verifyFn.inputRequired('#area_row_edit')){
              return;
            }
            thisPage.trDblclick(thisTable.row(this).data());
          });
          $('#btnAdd').on('click',function(){
            thisPage.edit();
          });
          //搜索按钮
          $('#btnSearch').on('click',function(){
            thisPage.search();
          });
          //按钮组-自定义显示列
          $('#iconColumn').parent().parent().on('click',function(){
            pageDataTable.columnCustom(thisTable,tableDom,'#divKeyColumns');
          });
          //按钮组-搜索
          $('#iconRefresh').parent().parent().on('click',function(){
            thisPage.search();
          });
          $('#btnDel').on('click',function(){
            thisPage.delKeys();
          });
        },
        /*批量删除*/
        delKeys : function(){
          var kids = '';
          var index = 0;
          $(tableDom + ' tbody input:checked').each(function(){
            index ++;
            var value = this.value;
            if(value != null && value != ''){
              if(kids.length > 0)
                kids += ",";
              kids += value;
            }
          });
          if(kids == ''){
            layerFn.alert('请选择要删除的数据!',AppKey.code.code199);
            return;
          }
          if(verifyFn.inputRequired('#area_btn_delByKeys')){
            layerFn.alert('没有删除操作权限',AppKey.code.code199);
            return;
          }
          layerFn.confirm('将要准备删除['+index+']条数据且是无法恢复,确定要继续吗?',function(){
            layerFn.delBatchHint(urlDelByKeys,kids,function(data){
              thisPage.complete(data,null,true);
            });
          });
        },
        trDblclick : function(data){
          thisPage.edit(data.kid);
        },
        search : function(){
          if(verifyFn.inputRequired('#area_btn_listData')){
            layerFn.alert('没有操作权限',AppKey.code.code199);
            return;
          }
          $(tableDom + '_wrapper table input[type=checkbox]').prop('checked',false);
          thisTable.draw();
        },
        resetForm : function(){
          winFn.clearFormData('#form_sys_area_edit');
          winFn.addDropdown('#dropdownLabellevel','选择级别');
        },
        edit : function(kid){
          var title = '添加';
          if(kid != '' && kid != undefined){
            if(verifyFn.inputRequired('#area_row_queryById')){
              layerFn.alert('没有操作权限',AppKey.code.code199);
              return;
            }
            title = '编辑';
            winFn.setDomValue(inputEditKeyId,kid);
            layerFn.queryByIdHint(urlQueryById,kid,function(data){
              thisPage.openDialog(title,kid,data);
            });
          }else{
            winFn.setDomValue(inputEditKeyId,'');
            thisPage.openDialog(title);
          }
        },
        openDialog : function(title,kid,map){
          layerFn.addOrEdit(title,'#div_sys_area_edit',['380px','360px'],function(index,layero){
            if(verifyFn.inputRequired('#name')){
              layerFn.alert('区域名称不能为空',AppKey.code.code199);
              return;
            }
            if(verifyFn.inputRequired('#level')){
              layerFn.alert('请选择区域级别',AppKey.code.code199);
              return;
            }
            var params = {
              name : winFn.getDomValue('#name'),
              pid : winFn.getDomValue('#pid'),
              level : winFn.getDomValue('#level'),
              kid : winFn.getDomValue(inputEditKeyId)
            };
            var url = urlAdd;
            if (kid != null && kid != ''){
              url = urlEdit;
              if(verifyFn.inputRequired('#area_row_edit')){
                layerFn.alert('没有编辑操作权限',AppKey.code.code199);
                return;
              }
            }else{
              if(verifyFn.inputRequired('#area_btn_add')){
                layerFn.alert('没有添加操作权限',AppKey.code.code199);
                return;
              }
            }
            layerFn.submit(url,params,function(data){
              thisPage.complete(data,index,true);
            });
          });
          thisPage.resetForm();//清空
          if(map != null){
            $.each(map.data,function(k,v){
              try{
                $('#'+k).val(v);
                if(k == 'level'){
                  winFn.editDropdown('#dropdownLabellevel','level'+v);
                }
              }catch(e){}
            });
          }
        },
        rowEdit : function(index){
          var row = thisJquery.fnGetData(index);
          thisPage.edit(row.kid);
        },
        rowDel : function(index){
          var row = thisJquery.fnGetData(index);
          if(verifyFn.inputRequired('#area_row_delById')){
            layerFn.alert('没有删除操作权限',AppKey.code.code199);
            return;
          }
          layerFn.confirm('删除后无法恢复,确定要删除吗?',function(){
            layerFn.delByIdHint(urlDelById,row.kid,function(data){
              thisPage.complete(data,null,true);
            });
          });
        },
        rowNode : function(index){
          var row = thisJquery.fnGetData(index);
          layerFn.addOrEdit('['+row.name+']添加子级区域','#div_sys_area_edit',['380px','400px'],function(index,layero){
            if(verifyFn.inputRequired('#name')){
              layerFn.alert('区域名称不能为空',AppKey.code.code199);
              return;
            }
            if(verifyFn.inputRequired('#level')){
              layerFn.alert('请选择区域级别',AppKey.code.code199);
              return;
            }
            var params = {
              name : winFn.getDomValue('#name'),
              pid : row.kid,
              level : winFn.getDomValue('#level'),
              kid : winFn.getDomValue(inputEditKeyId)
            };
            if(verifyFn.inputRequired('#area_btn_add')){
              layerFn.alert('没有添加权限',AppKey.code.code199);
              return;
            }
            layerFn.submit(urlAdd,params,function(data){
              thisPage.complete(data,index,true);
            });
          });
          thisPage.resetForm();
        },
        rowProxy : function(rowIndex){
          if(verifyFn.inputRequired('#area_btn_proxy')){
            layerFn.alert('没有操作权限',AppKey.code.code199);
            return;
          }
          var row = thisJquery.fnGetData(rowIndex);
          if(row.level == 1){
            layerFn.alert('省级或直辖市无需设置',AppKey.code.code199);
            return;
          }
          layerFn.addOrEdit('['+row.name+']设置代理级别佣金优惠券','#div_sys_area_proxy',['360px','290px'],function(layerIndex){
            if(verifyFn.inputRequired('#level_value')){
              layerFn.alert('请选择级别',AppKey.code.code199);
              return;
            }
            var params = {
              areaId : row.kid,
              level : winFn.getDomValue('#level_value')
            };
            layerFn.submit(addProxy,params,function(data){
              thisPage.complete(data,layerIndex,true);
            });
          });
          winFn.clearFormData('#form_area_proxy',[{'dropdownLabelProxy':'选择选项'}]);
          var levelValue = row.level_value;
          if(levelValue){
            winFn.editDropdown('#dropdownLabelProxy','level_value'+levelValue);
            winFn.dropdown('#level_value',levelValue);
          }
        },
        complete : function(data,index,search){
          try{
            if(index){
              layerFn.closeIndex(index);
            }
            if(search){
              thisPage.search();
            }
            if(data){
              layerFn.handleResult(data.msg,data.code);
            }
          }catch(e){}
        }
      };
      thisPage.init();
    });
  });
</script>